.error-mask {
  @apply w-full h-full flex flex-col justify-center items-center relative;
  background-size: 100% 100%;

  &.vod {
    background-image: url('/images/not_vod_vip.webp');
  }

  &.live {
    background-image: url('/images/not_live_vip.webp');
  }

  .text {
    @apply text-center font-bold;
    font-family: Alibaba PuHuiTi 2;
    font-size: 1.375rem;
    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .btn {
    @apply mt-8 text-white;
    font-family: Alibaba PuHuiTi 2;
    font-size: 1.375rem;
    font-weight: normal;
    font-feature-settings: 'kern' on;
    /* 会员深色 */
    width: 15rem;
    height: 3.75rem;
    background: linear-gradient(90deg, #ffb521 0%, #ff651d 100%);

    &.btnNormal {
      @apply text-white ml-4;
      background: #767676;
    }
  }

  .normal {
    @apply mt-10 text-white-80 text-lg cursor-pointer;
    &:hover {
      @apply underline;
    }
    line-height: 1.125rem;
  }

  .backBox {
    @apply absolute left-0 top-0 w-full h-auto;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.9) 92%);

    .backHeader {
      @apply absolute;
    }

    .backToBox {
      @apply w-full absolute left-0 top-0 h-10 flex items-center justify-center text-white overflow-hidden;
      padding: 0 3.375rem;
      transition: all 0.3s;

      .backTo {
        @apply top-2/4 absolute h-8 w-8 bg-transparent;
        transform: translateY(-50%);
        left: 3.375rem;

        & > img {
          @apply w-full h-full object-contain;
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .error-mask {
    .text {
      @apply text-base leading-4 my-2;
    }

    .btn {
      @apply mt-2 text-xs;
      width: 7.5rem;
      height: 2.25rem;
    }

    .backBox {
      .backToBox {
        @apply py-0 px-4 justify-start;

        &.backToPhone {
          .backTo {
            @apply h-5 w-5 left-4;
          }

          .span {
            @apply text-sm;
            margin-left: 2.875rem;
          }
        }
      }
    }

    .normal {
      @apply mt-5 text-sm leading-4;
    }
  }
}
